<!DOCTYPE html>
<form id="UserRegistrationForm">
<html lang="en">
  <head>
    <!-- Site Title-->
    <title>Expense Management</title>
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="icon" href="assets/img/favicon.ico" type="image/x-icon">
    <!-- Stylesheets-->
    <!--<link rel="stylesheet" type="text/css" href="assets/admin-tools/admin-forms/css/admin-forms.css">-->
    <link href="../Content/css/admin-forms.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:300,400,600,700%7CMontserrat:400,700">
    <!--<link rel="stylesheet" type="text/css" href="assets/skin/default_skin/css/theme.css">-->
      <link href="../Content/themes/theme.css" rel="stylesheet" />
		<!--[if lt IE 10]>
    <div style="background: #212121; padding: 10px 0; box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3); clear: both; text-align:center; position: relative; z-index:1;"><a href="http://windows.microsoft.com/en-US/internet-explorer/"><img src="images/ie8-panel/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."></a></div>
    <script src="js/html5shiv.min.js"></script>
		<![endif]-->
  </head>
  <body class="external-page sb-l-c sb-r-c">
    <!-- Start: Main-->
    <div id="main" class="animated fadeIn">
      <!-- Start: Content-Wrapper-->
      <section id="content_wrapper">
        <!-- begin canvas animation bg-->
        <div id="canvas-wrapper">
          <canvas id="demo-canvas"></canvas>
        </div>
        <!-- Begin: Content-->
        <section id="content">
          <div id="login1" style="margin-top: 3%;" class="admin-form theme-info mw700">
            <div class="row mb15 table-layout">
              <!--<div class="col-xs-6 va-m pln"><a href="index.html" title="Return to Dashboard"><img src="assets/img/logos/logo_white.png" title="TemplateMonster Logo" class="img-responsive w250"></a></div>-->
              <div class="col-xs-6 text-right va-b pr5">
                <div class="login-links"><a href="pages_login.html" title="Sign In">Sign In</a> <span class="text-white">&#124;</span> <a href="pages_register.html" title="Register" class="active">Register</a>
                </div>
              </div>
            </div>
            <div class="panel panel-info mt10 br-n">
              <div class="panel-heading heading-border bg-white">
                <div class="section row mn">
                  <div class="col-sm-4"><a href="#" class="button btn-social facebook span-left mr5 btn-block"><span><i class="fa fa-facebook"></i></span>Facebook</a></div>
                  <div class="col-sm-4"><a href="#" class="button btn-social twitter span-left mr5 btn-block"><span><i class="fa fa-twitter"></i></span>Twitter</a></div>
                  <div class="col-sm-4"><a href="#" class="button btn-social googleplus span-left btn-block"><span><i class="fa fa-google-plus"></i></span>Google+</a></div>
                </div>
              </div>
              <form id="account2" method="post" action="/">
                <div class="panel-body p25 bg-light">
                  <div class="section-divider mt10 mb40"><span>Set up your account</span></div>
                  <!-- .section-divider-->
                  <div class="section row">
                    <div class="col-md-6">
                      <label for="firstname" class="field prepend-icon">
                        <input id="firstname" type="text" name="FirstName" placeholder="First name..." class="gui-input">
                        <label for="firstname" class="field-icon"><i class="fa fa-user"></i></label>
                      </label>
                    </div>
                    <div class="col-md-6">
                      <label for="lastname" class="field prepend-icon">
                        <input id="lastname" type="text" name="LastName" placeholder="Last name..." class="gui-input">
                        <label for="lastname" class="field-icon"><i class="fa fa-user"></i></label>
                      </label>
                    </div>
                  </div>
                  <div class="section">
                    <label for="email" class="field prepend-icon">
                      <input id="email" type="email" name="Email" placeholder="Email address" class="gui-input">
                      <label for="email" class="field-icon"><i class="fa fa-envelope"></i></label>
                    </label>
                  </div>
                  <div class="section">
                   <!-- <div class="smart-widget sm-right smr-190">-->
                      <label for="UserName" class="field prepend-icon">
                        <input id="UserName" type="text" name="UserName" placeholder="Choose your username" class="gui-input">
                        <label for="UserName" class="field-icon"><i class="fa fa-user"></i></label>
                      </label>
                     <!-- <label for="username" class="button">.templatemonster.com</label>-->
                <!--    </div>-->
                  </div>
                  <div class="section">
                    <label for="password" class="field prepend-icon">
                      <input id="password" type="password" name="Password" placeholder="Create a password" class="gui-input">
                      <label for="password" class="field-icon"><i class="fa fa-unlock-alt"></i></label>
                    </label>
                  </div>
                  <div class="section">
                    <label for="confirmPassword" class="field prepend-icon">
                      <input id="confirmPassword" type="password" name="confirmPassword" placeholder="Retype your password" class="gui-input">
                      <label for="confirmPassword" class="field-icon"><i class="fa fa-lock"></i></label>
                    </label>
                  </div>
                  <div class="section-divider mv40"><span>Review the Terms</span></div>
                  <!-- .section-divider-->
                  <div class="section mb15">
                    <label class="option block">
                      <input type="checkbox" name="trial"><span class="checkbox"></span>Sign me up for a<a href="#" class="theme-link"> 7-day free PRO trial.</a>
                    </label>
                    <label class="option block mt15">
                      <input type="checkbox" name="terms"><span class="checkbox"></span>I agree to the<a href="#" class="theme-link"> terms of use.</a>
                    </label>
                  </div>
                </div>
                <div class="panel-footer clearfix">
                  <button type="button" class="button btn-primary pull-right" onclick="RegisterUser();">Create Account</button>
                </div>
              </form>
            </div>
          </div>
        </section>
      </section>
    </div>
  </body>
</html>
</form>
    <!-- core scripts-->
   <!-- <script src="plugins/core.min.js"></script>-->
    <!-- Theme Javascript-->
 <!--   <script src="assets/js/utility/utility.js"></script>
    <script src="assets/js/demo/demo.js"></script>
    <script src="assets/js/main.js"></script>-->
    <!-- Page Javascript-->
<script src="../Content/Scripts/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
        //jQuery(document).ready(function () {
        //  "use strict";
        //  // Init Theme Core
        //  Core.init();
        //  // Init Demo JS
        //  Demo.init();
        //  // Init CanvasBG and pass target starting location
        //  CanvasBG.init({
        //    Loc: {
        //      x: window.innerWidth / 2.1,
        //      y: window.innerHeight / 4.2
        //    },
        //  });
        //});

        function RegisterUser() {
            var form = $.extend({}, { data: $('form#UserRegistrationForm').serialize() }, form);
            $.ajax({
                url: "User/UserRegistration/RegisterUser",
                type: "Post",
                data: form.data,
                success: function (data) {
                    alert(data);
                },
                error: function () {
                    alert("An error has occured!!!");
                }
            });
        }
    </script>